title: 字符串的扩展
date: 2018.9.6
tags:
2018.9.6 星期四 12:56
1. 字符的 Unicode 表示法
2. codePointAt()
3. String.fromCodePoint()
4. 字符串的遍历器接口
5. normalize()
6. includes(), startsWith(), endsWith()
7. repeat()
8. padStart()，padEnd()
9. matchAll()
10. 模板字符串
11. 实例：模板编译
12. 标签模板
13. String.raw()
14. 模板字符串的限制
但是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。
ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。
有了这种表示法之后，JavaScript 共有 6 种方法可以表示一个字符。
"\uD842\uDFB7"// "𠮷"
"\u20BB7"// " 7"
"\u{20BB7}"// "𠮷"
'\u{1F680}' === '\uD83D\uDE80' // true
// 6 中方法
'\z' === 'z' // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true
JavaScript 内部，字符以 UTF-16 的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（Unicode 码点大于0xFFFF的字符），JavaScript 会认为它们是两个字符。
ES6 提供了codePointAt方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。
var s = "𠮷";
s.length // 2
s.charAt(0) // ''
s.charAt(1) // ''
s.charCodeAt(0) // 55362
s.charCodeAt(1) // 57271
let s = '𠮷a';
s.codePointAt(0) // 134071
s.codePointAt(1) // 57271
s.codePointAt(2) // 97
总之，codePointAt方法会正确返回 32 位的 UTF-16 字符的码点。对于那些两个字节储存的常规字符，它的返回结果与charCodeAt方法相同。
#### codePointAt方法返回的是码点的十进制值，如果想要十六进制的值，可以使用toString方法转换一下。
let s = '𠮷a';
s.codePointAt(0).toString(16) // "20bb7"
s.codePointAt(2).toString(16) // "61"
for (let ch of s) {
console.log(ch.codePointAt(0).toString(16));
}
// 20bb7
// 61
你可能注意到了，codePointAt方法的参数，仍然是不正确的。比如，上面代码中，字符a在字符串s的正确位置序号应该是 1，但是必须向codePointAt方法传入 2。解决这个问题的一个办法是使用for…of循环，因为它会正确识别 32 位的 UTF-16 字符。
#### codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。
function is32Bit(c) {
return c.codePointAt(0) > 0xFFFF;
}
ES6 提供了String.fromCodePoint方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode方法的不足。在作用上，正好与codePointAt方法相反。
注意，fromCodePoint方法定义在String对象上，而codePointAt方法定义在字符串的实例对象上。
使得字符串可以被for…of循环遍历。
除了遍历字符串，
这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。
let text = String.fromCodePoint(0x20BB7);
for (let i = 0; i < text.length; i++) {
console.log(text[i]);
}
// " "
// " "
for (let i of text) {
console.log(i);
}
// "𠮷"
const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;
大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。
模板字符串之中还能调用函数。
如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。
如果模板字符串中的变量没有声明，将报错。
模板字符串甚至还能嵌套。
let template = `
<ul>
<% for(let i=0; i < data.supplies.length; i++) { %>
<li><%= data.supplies[i] %></li>
<% } %>
</ul>
`;
模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。
“标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容。
标签模板的另一个应用，就是多语言转换（国际化处理）。
模板字符串本身并不能取代 Mustache 之类的模板库，因为没有条件判断和循环处理功能，但是通过标签函数，你可以自己添加这些功能。
除此之外，你甚至可以使用标签模板，在 JavaScript 语言之中嵌入其他语言。
往往用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。
前面提到标签模板里面，可以内嵌其他语言。但是，模板字符串默认会将字符串转义，导致无法嵌入其他语言。
13:01